<template>
  <div :id="id" :ref="refValue"></div>
</template>

<script>
import Player from "xgplayer";
import HlsJsPlayer from "xgplayer-hls.js";
export default {
  name: "XgLive",
  props: {
    id: {
      type: Number,
      default: "live-player",
    },
    refValue: {
      type: String,
      default: "live-player",
    },
    width: {
      type: Number,
      default: 800,
    },
    height: {
      type: Number,
      default: 600,
    },
    url: {
      required: true,
      type: String,
    },
    lastPlayTime: {
      type: Number,
      default: 0,
    },
    poster: {
      type: String,
      default: "",
    },
    autoplay: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      player: undefined,
    };
  },
  mounted() {
    console.log(this.lastPlayTime);
    this.initPlayer();
  },
  methods: {
    initPlayer() {
      if (this.player) {
        this.player.destroy(true);
      }
      this.player = new HlsJsPlayer({
        width: this.width,
        height: this.height,
        id: this.id,
        url: this.url,
        autoplay: this.autoplay,
        // fluid: true, // 流体
        // playbackRate: [0.5, 0.75, 1, 1.5, 2], // 播放速率
        videoInit: true,
        defaultPlaybackRate: 1,
        lastPlayTime: this.lastPlayTime, //视频起播时间（单位：秒）
        lastPlayTimeHideDelay: 5, //提示文字展示时长（单位：秒）
        volume: 0.6,
        poster: this.poster,
        // controls: false,
        disableProgress: true, //禁用进度条播放器被接管或劫持时无效，比如iOS或安卓部分环境下）
        ignores: ["progress"], //隐藏进度条
        controlsList: ["nodownload", "nofullscreen", "noremoteplayback"],
        playsinline: true,
      });
      this.player.on("play", () => {
        this.$emit("onPlay", { player: this.player });
      });
      this.player.on("pause", () => {
        this.$emit("onPause", { player: this.player });
      });
      this.player.on("playing", () => {
        this.$emit("onPlaying", { player: this.player });
      });
      this.player.on("ended", () => {
        this.$emit("onEnded", { player: this.player });
      });
    },
  },
  watch: {
    url: {
      handler(newVal, oldVal) {
        this.initPlayer();
      },
      deep: true,
      immediate: false,
    },
  },
};
</script>

<style scoped>
</style>
